آموزش HTML-درس چهارم – لیست ها - طراحی سایت
سفارش تبلیغ
صبا ویژن
طراحی سایت
   مشخصات مدیر وبلاگ
 
    آمارو اطلاعات

بازدید امروز : 19
بازدید دیروز : 1
کل بازدید : 11745
کل یادداشتها ها : 11
------------------------------------------------------


------------------------------------------------------

نوشته شده در تاریخ 96/11/16 ساعت 3:26 ع توسط متین تیماسی


اهداف :

1-     معرفی انواع لیست ها

2-     نحوه ی بکار بردن و اعمال تغییرات روی آن ها

لیست ها بخشی از نوشته می باشند که یا با عدد یا با بولت و هرچیز دیگری طبقه بندی و شماره گذاری می شوند و معمولا نسبت به نوشته ی اصلی عمق بیشتری دارند.

در HTML لیست ها را معمولا به سه دسته تقسیم می کنند:

1-     لیست های شماره دار که به ترتیب عددی مرتب می شوند.

2-     لیست های بولت که توسط یک دایره سیاه توپر نمایش داده می شود.

3-     لیست های تعریفی که لیستی از لغات و معانی آنها می باشند.


لیست های شماره دار :

تگ آغازین و پایانی این نوع لیست ها <ol></ol> می باشد که به مرورگر می گوید این یک لیست شماره دار است و برای هر مورد از لیست هم از تگ <li></li> استفاده می کنیم.یعنی در واقع شکل عمومی به صورت زیر است:

<ol>

<li> مورد شماره 1</li>

<li> مورد شماره 2</li>

</ol>

لیست های بولت دار :

این نوع لیست هم دقیقا مانند لیست شماره دار است با این تفاوت که به جای تگ <ol> دارای تگ <ul> می باشند یعنی تگ آغاز و پایان عبارت است از : <ul></ul>

لیست های تعریفی:

این نوع لیست عمدتا برای نمایش لغت – معنی به کار برده می شوند هرچند طراحان از این نوع لیست برای ایجاد تورفتگی در متن هم استفاده می کنند. تگ این نوع لیست <dl> می باشد و موارد آن با تگ <dd> از یکدیگر تفریق داده می شوند.

نکته:شما می توانید حتی چند لیست را درون هم قرار دهید فقط توجه داشته باشید که به تعداد تگ های بازشده ، تگ های خاتمه را در جای مناسب قرار دهید.

برای تعیین نوع بولت هم می توانید از مشخصه ی type کمک بگیرید که مقادیری مثل circle  ، disc  ، square را در بر می گیرد (البته مقادیر دیگری هم دارد ولی این 3 تقریبا در تمام مرورگر ها شناخته شده می باشند). به عنوان مثال :

<ul type=”disc”>

<li> … </li>

</ul>

توجه کنید مشخصه ی type برای تگ <li> هم می تواند مورد استفاده قرار گیرد و زمانی این عمل را انجام می دهیم که قصد داشته باشیم یکی از موارد لیست را از بقیه جدا کنیم . دقت کنید که مقدار تعلق گرفته به مشخصه type در این مورد داخل کوتیشن ” ” نباشد.

<ul>

<li> … </li>

<li> … </li>

</ul>

مورد دیگری که به ندرت به آن احتیاج پیدا می کنید این است که می توانید یک لیست شماره دار را با هر عدد و یا حرفی و با مشخصه ی start شروع کنید. به عنوان مثال <ol start=”4”> لیست شماره داری ایجاد می کند که به جای 1 از 4 شروع می شود همچنین نقاط خاص را می توان با مشخصه ی value دوباره شماره گذاری کرد :

<li value=”7”>

توجه داشته باشید که همیشه همراه با مشخصه ی value و start از اعداد استفاده کنید . مثلا برای ایجاد یک لیست که با حرف d آغاز می شود باید این چنین تایپ کنید :

<ol type=”a” start=”4”>

برای نمایش شماره لیست به صورت اعداد یونانی هم از type=i استفاده می شود.

تمرین 1-4 :

نام اتومبیل های زیر را در یک لیست بولت دار و یک لیست شماره دار مرتب کنید و در صفحه ی وب نمایش دهید :  BMW ، TVR ، Ferrari

تمرین 2-4 :

نام کشور های زیر را در یک لیست شماره دار و در ادامه ی لیست بالا قرار دهید به طوری که شماره ی اولین کشور با 4 شروع شود: آلمان ، ایالات متحده ، ایتالیا

تمرین 3-4 :

لیستی شامل 5 مورد تهیه کنید که بولت دار باشد و بولت مورد سوم شکلی متفاوت با بقیه ی بولت ها داشته باشد.



جواب ها:


پاسخ تمرین 1-4 :

<html><head><title>تمرین 1-4</title></head><body>

<ul>

<li> BMW</li>

<li> TVR</li>

<li> Ferrari</li>

</ul><br />

<ol>

<li> BMW</li>

<li> TVR</li>

<li> Ferrari</li>

</ol>

</body></html>

پاسخ تمرین 2-4:

<ol srart=”4”>

<li>آلمان</li>

<li>ایالات متحده</li>

<li>ایتالیا</li>

</ol>

پاسخ تمرین 3-4:

<ul>

<li> مورد اول </li><li> مورد دوم</li>

<li type=”desc”>مورد سوم</li><li>مورد چهارم</li>

<li>مورد پنجم </li>

</ul>

 

منبع








طراحی پوسته توسط تیم پارسی بلاگ


           
           

هدایت به بالای صفحه